<template>
	<div>
		<div>
			<el-form :model="UserLogin" status-icon :rules="rules" ref="UserLogin" label-width="100px"
				class="demo-ruleForm">
				<el-form-item label="账号" prop="username">
					<el-input type="username" v-model="UserLogin.username" autocomplete="off"></el-input>
				</el-form-item>

				<el-form-item label="密码" prop="password">
					<el-input type="password" v-model="UserLogin.password" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="确认密码" prop="checkPass">
					<el-input type="password" v-model="UserLogin.checkPass" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="电话号码" prop="phoneNum">
					<el-input v-model.number="UserLogin.phoneNum"></el-input>
				</el-form-item>
				<div style="width: 30%;text-align: center;">
					<el-form-item label="验证码" prop="message">
						<el-input v-model="UserLogin.message" placeholder="验证码"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSubmit">获取验证码</el-button>
					</el-form-item>
				</div>
				<div style="text-align: center;">
					<el-form-item>
						<el-button type="primary" @click="submitForm('UserLogin')">提交注册</el-button>
					</el-form-item>
				</div>
			</el-form>
		</div>
		<el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
			<span>注册成功点击进入登录界面</span>
			<span slot="footer" class="dialog-footer">

				<el-button type="primary" @click="dialogVisible = false">
					<router-link to="/" tag="span">确 认</router-link>
				</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			var checkAge = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('电话号码不能为空'));
				}
				setTimeout(() => {
					if (!Number.isInteger(value)) {

						callback(new Error('请输入电话号码'));
					} else {
						if (value < 10000000000) {

							callback(new Error('电话号码必须是11位'));
						} else {
							callback();
						}
					}
				});
			};
			//密码
			var validatePass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入密码'));
				} else {
					if (this.UserLogin.checkPass !== '') {
						this.$refs.UserLogin.validateField('checkPass');
					}
					callback();
				}
			};
			//确认密码
			var validatePass2 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入密码'));
				} else if (value !== this.UserLogin.password) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			};
			//短信验证
			var message = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入验证码'));
				} else {
					if (this.UserLogin.message == this.UserLogin.messagecode) {
						this.$message({
							message: '验证码正确',
							type: 'success'
						});
						callback();
					} else {
						callback(new Error('验证码不正确，请重新输入'));
					}

				}
			};
			//账号
			var validateUser = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入账号'));
				} else {
					// 发送axios
					this.axios.get("http://localhost:8085/users/" + this.UserLogin.username + "/verify").then(res => {
						if (res.data.code == 200) {
							this.$message({
								message: res.data.msg,
								type: 'success'
							});
							callback();
						} else {
							this.$message.error(res.data.msg);
						}



					})
				}

			};
			return {
				dialogVisible: false,

				//注册
				UserLogin: {
					message: '',
					username: '',
					password: '',
					checkPass: '',
					phoneNum: '',
					messagecode: ''
				},
				rules: {
					username: [{
						validator: validateUser,
						trigger: 'blur'
					}],
					message: [{
						validator: message,
						trigger: 'blur'
					}],
					password: [{
						validator: validatePass,
						trigger: 'blur'
					}],
					checkPass: [{
						validator: validatePass2,
						trigger: 'blur'
					}],
					phoneNum: [{
						validator: checkAge,
						trigger: 'blur'
					}]
				}
			};
		},
		methods: {
			//提交注册
			submitForm() {
				this.add()
				this.$refs[formName].resetFields();

			},



			//注册
			add() {
				this.axios.get("http://localhost:8085/users/" + this.UserLogin.username + "/" + this.UserLogin.password +
					"/" + this.UserLogin.phoneNum + "/register").then(res => {
					if (res.data.code == 200) {
						this.dialogVisible = true
					} else {
						this.$message.error(res.data.msg);
					}
				})

			},


			//短信验证
			onSubmit() {
				this.axios.get("http://localhost:8085/users/send/" + this.UserLogin.phoneNum + "/interAspect").then(
					res => {

						this.UserLogin.messagecode = res.data.msg
						alert(this.UserLogin.messagecode)
					})
			}
		}
	}
</script>

<style>
</style>
